<template>
  <aside class="col col-xl-2 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
    <div class="box mb-3 shadow-sm border rounded bg-white profile-box text-center">
      <div class="p-5">
        <img :src="userinfo.user_header" class="img-fluid rounded-circle" alt="Responsive image ">
      </div>
      <div class="p-3 border-top border-bottom">
        <h6 class="font-weight-bold text-dark mb-1 mt-0">{{userinfo.user_name}}</h6>
        <p class="mb-0 text-muted">{{userinfo.personalized_signature}}
        </p>
      </div>
      <div class="p-3">
        <div class="d-flex align-items-top mb-2">
          <p class="mb-0 ml-3 text-muted">职业</p>
          <p class="font-weight-bold text-dark mb-0 mt-0 ml-auto mr-3">{{userinfo.occupation}}</p>
        </div>
        <div class="d-flex align-items-top mb-2">
          <p class="mb-0 ml-3 text-muted">性别</p>
          <p class="font-weight-bold text-dark mb-0 mt-0 ml-auto mr-3">{{userinfo.sex}}</p>
        </div>
        <div class="d-flex align-items-top mb-2">
          <p class="mb-0 ml-3 text-muted">访问 </p>
          <p class=" text-dark mb-0 mt-0 ml-auto mr-3">{{userinfo.page_view}}</p>
        </div>
        <div class="d-flex align-items-top mb-2">
          <p class="mb-0 ml-3 text-muted">获赞</p>
          <p class=" text-dark mb-0 mt-0 ml-auto mr-3">{{userinfo.like_num}}</p>
        </div>
      </div>
    </div>
    <join-us></join-us>
  </aside>
</template>

<script>
import JoinUs from '@/components/common/joinUs.vue';

export default {
  props: ['userinfo'],
  data() {
    return {

    };
  },
  components: {
    JoinUs,

  },
};
</script>

<style scoped lang="scss">

</style>
